<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="#{store.templatePath}/template.xhtml">

    <ui:define name="title">#{product.name}</ui:define>

    <ui:define name="body">

        <div class="product-central-column">

            <h1>#{product.name}</h1>

            <div>#{product.description}</div>

            <f:subview id="noDescription" rendered="#{product.longDescription == null}">
                <h:graphicImage value="#{product.urlImageSmall}"
                                alt="#{product.name}"
                                rendered="#{product.urlImageSmall != null}" />
                <h:graphicImage value="/r/pi/#{product.urlAlias}-s.jpg"
                                alt="#{product.name}"
                                rendered="#{product.urlImageSmall == null}" /><br/>
            </f:subview>

            <f:subview id="hasDescription" rendered="#{product.longDescription != null}">
                <div class="product-long-description">
                    <h:outputText value="#{product.longDescription}" escape="false"/>
                </div>
            </f:subview>

        </div>


        <div class="product-right-column">

            <div class="product-panel">


                <ui:include src="/incl/price.xhtml" />

                <br/><br/>


                <a4j:form>
                    <script type="text/javascript">
                        function onAddToCart() {
                            var request = new Ajax.Request('/cart/added', {

                                onSuccess: function(response) {alert(response)},
                                onFailure: function() {alert('failure!')}
                            }
                          );
                            return true;

                        }
                    </script>
                    <a4j:commandButton value="#{messages.orderButton}"  action="#{cart.addProduct(product,1)}"
                                       reRender="cart" oncomplete="onAddToCart" />
                    <p>#{messages.youCanChangeQuantityLater}</p>
                </a4j:form>


            </div>

            <div class="product-properties">
                <ui:repeat value="#{product.properties}" var="p">
                    <p>#{p.name}: #{p.value}</p>
                </ui:repeat>
            </div>

        </div>


    </ui:define>

</ui:composition>

</html>